<template>
    <div class="login-box">
        <el-card class="box-card">
            <template #header>
                <h3>管理员后台管理系统</h3>
            </template>
            <!-- 表单组件 -->
            <el-form size="large" :model="loginForm" :rules="rules">
                <el-form-item label="账号" prop="loginname">
                    <el-input type="text" v-model="loginForm.loginname">
                    </el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" autocomplete="off" v-model="loginForm.password" @keyup.enter="login" />
                    <!-- 添加键盘事件 enter登录 -->
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang="ts">

import { reactive, ref } from 'vue';
import { useRouter } from "vue-router";
import { userLoginAPI } from "../../api/user"
import { log } from 'console';

// 用户登录的账号

let $router = useRouter();
const loginForm = reactive({
    loginname: "",
    password: "",
});
let rules = reactive({
    loginname: [{ required: true, message: "账号不能为空", trigger: "blur" }],
    password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
})
const login = () => {
    userLoginAPI({
        account: loginForm.loginname,
        password: loginForm.password,
    }).then((res: any) => {
        console.log(res);


        if (res.data.code == 2000) {

            // 存储token
            // localStorage.setItem('pc',res.data)
            localStorage.setItem("pc-token", res.data.data.token)
            localStorage.setItem("pc-account", res.data.data.account)
            // 登录成功 利用路由跳转到首页
            $router.push('/admin/adminList')
        }
    })
}
</script>

<style scoped>
.login-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-image: url("https://pic.616pic.com/bg_w1180/00/01/52/4vbAQ5YTKN.jpg!/fh/300");
    background-repeat: no-repeat;
    background-size: cover;
}

.box-card {
    width: 400px;
}
</style>